import { getColorTextLoadMap, tooltipLength } from '@/utils';
import { Button, Tooltip } from 'antd';
import { ConditionManageAPI } from '../common/type';
import pageStyles from '@/common/pageLayout.less';
import { Fragment } from 'react';
import { EditOutlined } from '@ant-design/icons';

/** 表格功能操作 */
const getManageFunctions = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: ConditionManageAPI.IOperationClick,
  /** 数据操作对象 */
  record: Record<string, any>,
) => {
  /** 功能操作集 */
  let operationList: any = [];

  /** 编辑 */
  const Edit = !!curRes['/activitiController/editCondition'] && (
    <Fragment key={record?.id + 'EditOutlined'}>
      <Button
        className='manageBtntTxtStyle'
        onClick={() => {
          operateFnc?.onEdit(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EditOutlined />}
      >
        编辑
      </Button>
    </Fragment>
  );

  /** 一个按钮都没有时展示*/
  const Disable = (
    <Fragment key={record?.id + '--Disable'}>
      <Button
        style={{ color: '#000' }}
        className='manageBtntTxtStyle'
        type={'link'}
        size={'small'}
        disabled
      >
        --
      </Button>
    </Fragment>
  );

  operationList = [Edit];
  operationList = operationList?.filter((itemBtn: any) => itemBtn);
  return operationList && operationList?.length > 0 ? operationList : [Disable];
};

/**
 * 表格信息 展示和操作
 * @returns
 */
const getTableColumns = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: ConditionManageAPI.IOperationClick,
) => {
  return [
    {
      title: '表名',
      dataIndex: 'tableName',
      key: 'tableName',
      width: 110,
      visible: true,
      unDrag: true,
      fixed: 'left',
      sorter: (a: any, b: any) => (a.tableName > b.tableName ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '表字段',
      dataIndex: 'field',
      key: 'field',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.field > b.field ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      key: 'fieldName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.fieldName > b.fieldName ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '字段类别',
      dataIndex: 'fieldType',
      key: 'fieldType',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => a.fieldType - b.fieldType,
      render: (text: string) => {
        let newText = '';
        let textColor = '';
        if (text == '0') {
          newText = '数字';
          textColor = '#0e5895';
        } else if (text == '1') {
          newText = '字符';
          textColor = '#faad14';
        }
        return (
          <span style={{ color: textColor }}>{newText ? newText : '--'}</span>
        );
      },
    },
    {
      title: '执行方式',
      dataIndex: 'isAuto',
      key: 'isAuto',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => a.isAuto - b.isAuto,
      render: (text: string) => {
        let newText = '';
        let textColor = '';
        if (text == '0') {
          newText = '系统办理';
          textColor = '#096dd9';
        } else if (text == '1') {
          newText = '人工办理';
          textColor = '#f0541f';
        }
        return (
          <span style={{ color: textColor }}>{newText ? newText : '--'}</span>
        );
      },
    },
    {
      title: '条件归类',
      dataIndex: 'category',
      key: 'category',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => a.category - b.category,
      render: (text: string) => {
        let newText = '';
        let textColor = '';
        if (text == '0') {
          newText = '条件设置';
          textColor = '#df3d96';
        } else if (text == '1') {
          newText = '业务变更';
          textColor = '#f88886';
        }
        return (
          <span style={{ color: textColor }}>{newText ? newText : '--'}</span>
        );
      },
    },
    {
      title: '工单类别',
      dataIndex: 'orderTypeName',
      key: 'orderTypeName',
      width: 120,
      visible: false,
      sorter: (a: any, b: any) => (a.orderTypeName > b.orderTypeName ? 1 : -1),
      render: (text: string) => {
        let { colorText, color } = getColorTextLoadMap(text);
        return (
          <Tooltip title={colorText}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ color: color }}
            >
              {colorText ? colorText : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '状态类型',
      dataIndex: 'stateTypeName',
      key: 'stateTypeName',
      width: 120,
      visible: false,
      sorter: (a: any, b: any) => (a.stateTypeName > b.stateTypeName ? 1 : -1),
      render: (text: string) => {
        let { colorText, color } = getColorTextLoadMap(text);
        return (
          <Tooltip title={colorText}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ color: color }}
            >
              {colorText ? colorText : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '是否使用',
      dataIndex: 'isOpen',
      key: 'isOpen',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => a.isOpen - b.isOpen,
      render: (text: string) => {
        let newText = '';
        let textColor = '';
        if (text == '0') {
          newText = '否';
          textColor = '#ff3700';
        } else if (text == '1') {
          newText = '是';
          textColor = '#42c900';
        }
        return (
          <span style={{ color: textColor }}>{newText ? newText : '--'}</span>
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
      visible: true,
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 140 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 90,
      visible: true,
      unDrag: true,
      fixed: 'right',
      render: (text: any, record: any) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {getManageFunctions(curRes, operateFnc, record)}
          </div>
        );
      },
    },
  ];
};

export { getTableColumns };
